<script setup lang="ts">
import { computed, ref } from "vue";
import { useRouter } from "vue-router";
import menu1Icon from "@/assets/images/menu1.svg";
import menu1IconActive from "@/assets/images/menu1-active.svg";
import menu2Icon from "@/assets/images/menu2.svg";
import menu2IconActive from "@/assets/images/menu2-active.svg";
import menu3Icon from "@/assets/images/menu3.svg";
import menu3IconActive from "@/assets/images/menu3-active.svg";
const { currentRoute } = useRouter();

const active = computed(() => {
  // 当前选中标签
  const map = {
    home: 0,
    app: 1,
    my: 2,
  };
  const menuKey = currentRoute.value.meta.menuKey as keyof typeof map;
  return map[menuKey];
});

const list = ref([
  {
    title: "首页",
    active: menu1IconActive,
    icon: menu1Icon,
    url: "/base/home",
  },
  {
    title: "全部",
    active: menu2IconActive,
    icon: menu2Icon,
    url: "/base/appList",
  },
  {
    title: "我的",
    active: menu3IconActive,
    icon: menu3Icon,
    url: "/base/my",
  },
]);
</script>

<template>
  <van-tabbar :modelValue="active" class="tabbar">
    <van-tabbar-item :to="item.url" v-for="item in list" :key="item.url">
      <span>{{ item.title }}</span>
      <template #icon="props">
        <img class="icon" :src="props.active ? item.active : item.icon" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<style scoped lang="scss">
.tabbar {
  --van-tabbar-item-text-color: #b2b2b6;
  border-top: 1px solid rgba(232, 232, 232, 0.4);
  .icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }
  :deep(.van-tabbar-item--active) {
    font-weight: 500;
  }
}
</style>
